<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文件上传</title>
	<style>
	div{
		height: 20px;
		width: 0%;
		background-color: red;
	}
	</style>
</head>
<body>
    <form action="">
    	文件: <input type="file" name="myFlie" id="myFile" onchange="getFileContent()" multiple="multiple"><br>
    	<div></div>
    	<input type="submit">
    </form>
   <!--  <img src="" alt=""> -->
    <script>
    var div = document.querySelector("div");
    // var img =document.querySelector("img");
    // var str = [];
    function getFileContent(){
    	
    	var file = document.querySelector("#myFile").files;
  	
	    for ( i = 0; i < file.length; i++) {
	    		var reader = new FileReader();
	    		console.log(i);
	 			reader.readAsDataURL(file[i]);
    			reader.onloadend = function(e){ 
	    		var img = document.createElement("img");
	    	 	img.src = e.target.result;
	    	 	document.getElementsByTagName("body")[0].appendChild(img);
	    	}    	
	    	 reader.onprogress= function(e){
	    	 	var persent = e.loaded/e.total*100+"%";
	    	 	div.style.width= persent;
	    	 	div.style.transition="all 4s";
	    	 }
	    	}
    }


    // var div = document.querySelector("div");
    // var img = document.querySelector("img");
    // function getFileContent(){
    // 	var reader = new FileReader();
    // 	var file = document.querySelector("#myFile").files;
    // 	reader.readDataAsURL(file[0]);
    //     reader.onload = function(){
    //     	console.log(reader.result)
    //     	document.querySelector("img").src = reader.result;
    //     }
    //     reader.onprogress = function(e){
    //     	var present = e.loaded/e.total *100 +"%";
    //     	div.style.width = "present";
    //     	div.style.transition = "all 4s";

    //     }

    	
    </script>
    
    
	
</body>
</html>